<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { post, get } from "@/libs/request";
import { useDialogCase } from "@/libs/dialog";
import NoData from "@/views/other/noData.vue";
import { ElMessage } from "element-plus";
import paginationCase from "@/components/paginationCase.vue";
import { debounce, dateFormat } from "@/libs/util";
const tableData = ref([]);
const pageData = ref({
  pageIndex: 1,
  pageSize: 30,
  total: 0,
});
const params = ref<{
  orderCode: String,
  orderStatus: number,
}>({
  orderCode: undefined,
  orderStatus: undefined,
})
const orderStatusOptions = [
  {
    value: "未支付",
  },
  {
    value: "待发货",
  },
  {
    value: "待收货",
  },
  {
    value: "已完成",
  },
  {
    value: "取消",
  }
];
//加载分页数据
const getPaginateDate = async (reload = true) => {
  const res = await post("order/paginate", {
    ...params.value
  }, {
    pageIndex: reload ? 1 : pageData.value.pageIndex,
    pageSize: pageData.value.pageSize,
  });
  if (res.errCode == 0) {
    pageData.value = res.page;
    tableData.value = res.data;
  }
};
const orderDeliver = async (row: any) => {
  const dialog = useDialogCase();
  dialog.show({
    width: "500px",
    path: "order/deliver",
    params: {
      orderId: row.orderId,
    },
    callback: () => {
      getPaginateDate();
    },
  });
};
/**
 * 查看详情
 */
const showDetail = (row: any) => {
  const dialog = useDialogCase();
  dialog.show({
    path: "order/detail",
    params: {
      orderId: row.orderId,
    },
    callback: () => {
      getPaginateDate();
    },
  });
};
watch(
  params.value,
  () => {
    debounce(() => {
      pageData.pageIndex = 1;
      getPaginateDate();
    });
  }
);
onMounted(() => {
  getPaginateDate();
});
</script>
<template>
  <div class="page">
    <div class="title">订单列表</div>
    <div class="toolbar">
      <div class="query">
        <el-input v-model="params.orderCode" placeholder="输入订单号查询订单" />
      </div>
      <div class="query">
        <el-select v-model="params.orderStatus" placeholder="订单状态" style="width: 180px" clearable>
          <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="main">
      <el-table :data="tableData" style="width: 100%" border>
        <template #empty>
          <NoData />
        </template>
        <el-table-column prop="orderCode" label="订单号" />
        <el-table-column prop="orderPrice" label="订单金额" />
        <el-table-column prop="paymentAmount" label="支付金额" />
        <el-table-column label="订单状态">
          <template #default="scope">
            {{ scope.row.orderStatus }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template #default="scope">
            {{ dateFormat(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button v-if="scope.row.orderStatus == '待发货'" type="primary" size="small"
              @click="orderDeliver(scope.row)">发货</el-button>
            <el-button type="primary" size="small" @click="showDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paginationCase v-model="pageData" @update:modelValue="getPaginateDate(false)" />
    </div>
  </div>
</template>